<template>
    <div class="com-container makeUpEcharts he">
        <div class="com-chart" ref="echarts"></div>
    </div>
</template>
<script>
// import * as echarts from 'echarts'
export default {
    props: ["commonData"],
    data() {
        return {
            chartInstance: null,
            allData: null, // 服务器返回的数据
            //   x轴数据
            xData: null,
            currentPage: 1, //当前显示页数
            totalPage: 0, // 共有多少页
            timerId: null, // 定时器标识
            p1: 0,
        };
    },
    watch: {
        commonData: function () {
            setTimeout(() => {
                this.getData();
            }, 120);
        },

        // activeIndex(val, oldVal) {
        // },
    },
    mounted() {
        setTimeout(() => {
            this.initChart();

            window.addEventListener("resize", this.screenAdapter);
            // 在页面加载完成的时候, 主动进行屏幕的适配
            this.screenAdapter();
        }, 100);
    },
    destroyed() {
        // 在组件销毁的时候, 需要将监听器取消掉
        window.removeEventListener("resize", this.screenAdapter);
    },
    methods: {
        initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.echarts);

            const initOption = {
                title: {
                    // text: '{a|' + 550 + '}\n{c|' + '报告总数' + '}',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        rich: {
                            a: {
                                // fontSize: 13,
                                fontWeight: 700,
                                color: 'rgba(23, 26, 29, 0.6000)'
                            },

                            c: {
                                // fontSize: 13,
                                color: 'rgba(23, 26, 29, 0.6000)',
                                padding: [5, 0]
                            }
                        }
                    }
                },

                series: [

                    {
                        name: '人员类型',
                        type: 'pie',
                        hoverAnimation: false,
                        radius: ['30%', '50%'],
                        color: ['rgba(131, 205, 119, 1)', 'rgba(253, 115, 115, 1)'],
                        label: {
                            show: true,
                            position: 'outside',
                            formatter: '{aa|{c}}\n{bb|{d}%}\n{aa|{b}}\n',

                            color: 'auto',
                            padding: [0, -45],
                            rich: {
                                aa: {
                                    height: 20,
                                    align: "left",
                                    fontSize: 12,
                                    verticalAlign: 'middle',


                                },

                                bb: {
                                    align: "left",
                                    fontSize: 12,
                                    verticalAlign: 'middle',

                                }
                            }
                        },
                        labelLine: {
                            show: true,
                            // length: 20,
                            // length2: 45,
                            lineStyle: {
                                width: 1
                            }
                        },
                        data: [{
                            // value: 100,
                            name: '已完成'
                        },
                        {
                            // value: 100,
                            name: '未完成'
                        },

                        ]
                    }
                ]
            };
            this.chartInstance.setOption(initOption);
        },
        getData() {
            this.updateChart(this.commonData)
        },
        // 更新图表
        updateChart(data) {

            var dataOption = {
                title: {
                    text: '{a|' + data.totalProjectCount + '}\n{c|' + '累计工程数' + '}',
                },
                series: [{
                    data: [{
                        value: data.finishedProjectCount,
                        name: '已完成'
                    },
                    {
                        value: data.totalProjectCount - data.finishedProjectCount,
                        name: '未完成'
                    },

                    ]
                }]


            };

            this.chartInstance.setOption(dataOption);
            // tools.loopShowTooltip(this.chartInstance, dataOption, {
            //   loopSeries: true,
            // });
        },

        // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
        screenAdapter() {
            // const titleFontSize = (this.$refs.echarts.offsetWidth / 100) * 3.6;
            const titleFontSize = (this.$refs.echarts.offsetWidth / 100) * 4;
            //   和分辨率大小相关的配置项
            const adapterOption = {
                title: {

                    x: 'center',
                    y: 'center',
                    textStyle: {
                        rich: {
                            a: {
                                fontSize: titleFontSize * 1.38,

                            },

                            c: {
                                fontSize: titleFontSize,

                            }
                        }
                    }
                },
                series: [
                    {
                        label: {
                            // {c}
                            normal: {

                                rich: {
                                    aa: {
                                        fontSize: titleFontSize,
                                    },

                                    bb: {

                                        fontSize: titleFontSize,


                                    }
                                }
                            }
                        },
                        labelLine: {
                            show: true,
                            length: titleFontSize * 2,
                            length2: titleFontSize * 3.9,

                        },

                    },

                ]
            };
            this.chartInstance.setOption(adapterOption);
            // 手动的调用图表对象的resize 才能产生效果
            this.chartInstance.resize();
        },
    },
};
</script>

<style lang="less" scoped>

</style>
